<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const expandedButton = ref(null);
const isExpanding = ref(false);

// 处理按钮点击
const handleButtonClick = (buttonClass) => {
    expandedButton.value = buttonClass;
    isExpanding.value = true;
};

// 添加动画结束处理函数
const handleAnimationEnd = () => {
    isExpanding.value = false;
    // 根据不同按钮跳转到不同的分类
    const categoryMap = {
        'c1': '/case/category?type=criminal',     // 刑事案件
        'c2': '/case/category?type=civil',        // 民事案件
        'c3': '/case/category?type=administrative', // 行政案件
        'c4': '/case/category?type=other'         // 其他案件
    };
    router.push(categoryMap[expandedButton.value]);
};
</script>

<template>
    <div class="root">
        <el-button class="c1" type="success" circle size="large" 
            @click="handleButtonClick('c1')">刑事案件</el-button>
        <el-button class="c2" type="primary" circle size="large"
            @click="handleButtonClick('c2')">民事案件</el-button>
        <el-button class="c3" type="warning" circle size="large"
            @click="handleButtonClick('c3')">行政案件</el-button>
        <el-button class="c4" type="danger" circle size="large"
            @click="handleButtonClick('c4')">其他</el-button>
        
        <!-- 添加展开动画层 -->
        <div v-if="isExpanding" 
            :class="['expand-overlay', expandedButton]"
            @animationend="handleAnimationEnd">
        </div>
    </div>

</template>

<style lang="scss">
.root{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding: 20px;
    margin-top: 60px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;

    .c1, .c2, .c3, .c4 {
        margin: 20px;
        width: 300px;
        height: 300px;
        font-size: 24px;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 50% !important;
        border: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.2));

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.4);
            z-index: 1;
        }

        &:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }
    }

    .c1 {
        background: linear-gradient(135deg, rgba(64, 158, 255, 0.8), rgba(44, 92, 255, 0.8));
    }

    .c2 {
        background: linear-gradient(135deg, rgba(103, 194, 58, 0.8), rgba(60, 140, 31, 0.8));
    }

    .c3 {
        background: linear-gradient(135deg, rgba(230, 162, 60, 0.8), rgba(184, 125, 36, 0.8));
    }

    .c4 {
        background: linear-gradient(135deg, rgba(245, 108, 108, 0.8), rgba(212, 63, 63, 0.8));
    }

    .expand-overlay {
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        animation: expand 0.5s ease-out forwards;
        z-index: 10;

        &.c1 {
            background: linear-gradient(135deg, rgba(64, 158, 255, 0.8), rgba(44, 92, 255, 0.8));
        }

        &.c2 {
            background: linear-gradient(135deg, rgba(103, 194, 58, 0.8), rgba(60, 140, 31, 0.8));
        }

        &.c3 {
            background: linear-gradient(135deg, rgba(230, 162, 60, 0.8), rgba(184, 125, 36, 0.8));
        }

        &.c4 {
            background: linear-gradient(135deg, rgba(245, 108, 108, 0.8), rgba(212, 63, 63, 0.8));
        }
    }
}

@keyframes expand {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(6);
    }
}
</style>